<template>
	<view>
		<addres :addressd="addressd"></addres>
		<locality></locality>
		<conent :clouddata="clouddata"></conent>
		<!--  发表-->
		<view class="fabiao">
			<image src="../../static/tab/fab.png" mode="" @click="navfabiao"></image>
		</view>
		
		<!-- 进入页面加载动画 -->
		<home-load v-if="shows"></home-load> 
		
		<vue-kong v-if="isshow"></vue-kong>
	</view>
</template>

<script>
	import addres from './comments/address.vue'
	import conent from './comments/content.vue'
	import locality from './comments/locality.vue'
	//定位
	import declared from '../../element/dingweiList.js'
	//引入vuex仓库中的值
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				addressd:"",
				clouddata:'', //发表请求回来的数据
				shows:true  ,//进入页面加载动画
				isshow:false  //空数据显示
			}
		},
		components:{
			locality,
			conent,
			addres
		},
		methods:{
			//子组件调用父组件的方法
			fatherMethods(uname){
				console.log(uname)
				if(uname == '全部'){
					this.cityDaty()
					//数据为空的时候是否显示空动画
					this.isshow = false
				}else{
					//筛选数据库
					const db = wx.cloud.database()
					const cloudData = db.collection('userdata')
					cloudData.where({
						datainfo:{
							myaddre:this.addressd,
							taber:uname
						}
					}).get()
					.then(res=>{
						console.log(res)
						let citydata = res.data
						console.log(citydata)
						// console.log(citydata.length)
						
						//数据为空显示动画
						if(citydata.length==0){
							this.isshow = true
						}else{
							this.isshow = false
						}
						this.tabcloud(citydata)
					}).catch(err=>{
						console.log(err)
					})
				}
			},
			
			addrace(){
				declared().then(res=>{
					// console.log(res)
					this.addressd = res.result.ad_info.city
					this.shows = false
					//定位成功后查询该地点的数据景点
					this.cityDaty(this.addressd)
				}).catch(err=>{
					console.log(err)
					this.addressd = '北京市'
					this.shows = false
					this.cityDaty()
				})
				
			},
			cityDaty(city){
				//定位成功后查询该地点的数据景点
				const db = wx.cloud.database()
				const listdata = db.collection('userdata')
				
				listdata.where({
					//查询'userdata'数据库下的datainfo里面的定位数据和当前数据是否相同
					datainfo:{
						myaddre:city
					}
				})
				.orderBy('datainfo.time','desc')
				.get()
				.then(res=>{
					
					//把拿到的数据做个处理返回一个数组
					//筛选数据，可有可无
					console.log(res.data) 
					
					let citydata = res.data
					this.tabcloud(citydata)
					
				})
				.catch(err=>{
					console.log(err)
				})
			},
			
			//tab切换筛选数据
			tabcloud(citydata){
				const adddata = citydata.map(item=>{
					let id = item._id
					let datainfo = item.datainfo
					return{
						id,
						datainfo 
					}
				})
				this.computs(adddata)
				this.clouddata = adddata
				
				
			},
			
			navfabiao(){
				uni.navigateTo({
				    url: '../travels/travels'
				});
			},
			
			computs(adddata){
				console.log(adddata)
			}
		},
		created() {
			//定位
			this.addrace()
		},
		
		//计算属性
		computed:{
			...mapState(['city','roturn']),
			//自定一个函数接受仓库中的数据
			count(){
				console.log(this.city.citying)
				this.addressd = this.city.citying
			},
			
			//仓库值为false，当上传完数据以后就往仓库传值为true，这样页面发生了改变就可以让computed 监听到
			//如果监听到值为true，说明发表成功，刷新页面
			routing(){
				if(this.roturn.pagesis==true){
					console.log('已经刷新页面。。。。')
					//随便调用一个函数就可以在上传数据之后刷新页面
					this.cityDaty()
				}
			}
		},
		watch:{
			
		}
	}
</script>

<style scoped>
	.fabiao{
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 20upx;
		left: 0;
		right: 0;
	}
	.fabiao image{
		width: 130upx;
		height: 130upx;
		border-radius: 40upx;
	}
</style>
